<template>
<view class="container">
  <view class="topbar">
    <view :class="(now_show == 'not_use' ? 'active' : '')" @tap="changeBar" data-show="not_use">未使用({{coupon_list.not_use.count}})</view>
    <view :class="(now_show == 'over' ? 'active' : '')" @tap="changeBar" data-show="over">已过期({{coupon_list.over.count}})</view>
    <view :class="(now_show == 'use' ? 'active' : '')" @tap="changeBar" data-show="use">已使用({{coupon_list.use.count}})</view>
  </view>
  <view :class="'coupon_list show_' + now_show" v-if="show_coupon_list.length > 0">
      <block v-for="(item, coupon_list) in show_coupon_list" :key="coupon_list"> 
          <view class="item cf">
              <view class="fl">
                  <view>
					  <text class="unit">{{currency}}</text>
                      <text class="int">{{item.int}}</text>
                      <text class="float">.{{item.float}}</text>
                  </view>
              </view>
              <view :class="'fr ' + (coupon_id == item.had_id ? 'select' : 'none')">
                  <view class="box">
                      <view class="title">满{{item.order_money}}元可用</view>
                      <view class="info">{{item.time}}</view>
                  </view>
              </view>
              <view class="several">{{item.get_num}}张</view>
              <view class="bj"></view>
          </view>
      </block>
  </view>
</view>
</template>

"<script>
import common from '../../utils/common.js'
var app = getApp();

export default {
  data() {
    return {
      mer_id: 0,
      coupon_list: {},
      show_coupon_list: [],
      now_show: 'not_use',
	  currency: '¥'
    };
  },

  onShareAppMessage: function () {},
  onReachBottom: function () {},
  onPullDownRefresh: function () {},
  onUnload: function () {},
  onHide: function () {},
  onShow: function () {},
  onReady: function () {},
  onLoad: function (options) {
    if (!options.mer_id) {
      options.mer_id = app.merchantOwn.mer_id;
    }

    this.setData({
      mer_id: options.mer_id
    });

    if (!app.globalData.userInfo) {
      var that = this; //调用应用实例的方法获取全局数据

      common.getUserInfo(function (userInfo) {
        console.log(userInfo);

        if (!userInfo.phone) {
          wx.navigateTo({
            url: "../my/newnumber"
          });
        } else {
          that.setMainContent();
        }
      }, 'setting');
    } else {
      if (!app.globalData.userInfo.phone) {
        wx.navigateTo({
          url: "../my/newnumber"
        });
      } else {
        this.setMainContent();
      }
    }
	common.changeCurrency(this)
  },
  components: {},
  props: {},
  methods: {
    changeBar: function (e) {
      var cShow = e.currentTarget.dataset.show;

      if (this.now_show == cShow) {
        return false;
      }

      this.setData({
        now_show: cShow,
        show_coupon_list: this.coupon_list[cShow].list,
        scrollTop: 0
      });
    },
    setMainContent: function () {
      common.post('Wxapp_merchant&a=merchant_coupon', {
        mer_id: this.mer_id
      }, "setCouponContent", this);
    },
    setCouponContent: function (result) {
      this.setData({
        coupon_list: result,
        show_coupon_list: result.not_use.list
      });
      wx.hideToast();
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "../pay/coupon.css";
page{
  background:#EFEFF4;
}
.topbar{
    display:flex;
    background-color: white;
}
.topbar view{
    width:33%;
    text-align: center;
    height:84rpx;
    line-height: 84rpx;
}
.topbar view.active{
    border-bottom:2rpx solid #ff5277;
    color:#ff5277;
}
.several {
    display: block;
    position: absolute;
    top: -8rpx;
    right: 0px;
    width: 70rpx;
    height: 70rpx;
    transform: rotate(50deg);
    line-height: 70rpx;
    text-align: center;
    font-size: 24rpx;
    color: #ff5277;
    z-index: 99;
}

.over .several {
    color: #9f9f9f;
}
.use .several {
    color: #e06b30;
}

.bj {
    background: url(https://hf.pigcms.com/static/wxapp/xhqt_03.png) center no-repeat;
    background-size: 70rpx;
    display: block;
    position: absolute;
    top:0px;
    right:8rpx;
    width: 70rpx;
    height: 70rpx;
}


.show_over .item .fl {
  background:#b9b9b9 url(https://hf.pigcms.com/static/wxapp/coupon_left_over.png);
}
.show_use .item .fl {
  background:#fe935d url(https://hf.pigcms.com/static/wxapp/coupon_left_use.png);
}
</style>